<template>
<div class="main">
    <div>{{all_myrest_BuyProduct==null?'':''}}</div>
  <div>{{BuyProductData==null?'':''}}</div>
  <div>{{all_myrest_IndexProducts?'':''}}</div>
  <div>{{BuyProductData==null?'':''}}</div>
  <div>{{all_myrest_IndexProducts==null?'':''}}</div>
  <div>{{all_myrest_QueryUserInfo==null?'':''}}</div>
    <div class="classify_nav_box">
        <!--分类 优选商品 晒单 常见问题 -->
        <div class="classify_nav">
            <ul>
                <li>
                    <router-link :to="{path:'/Jilu'}">
                    <!--<a href="/#/Jilu">-->
                        <div id="jiluAll" class="icon_box"><img src="../assets/duoImages/classify_icon_01.png" /></div>
                        <div class="icon_info">我的夺宝</div>
                    <!--</a>-->
                    </router-link>
                </li>
                <li>
                    <router-link :to="{path:'/Lukyjilu'}">
                    <!--<a href="/#/Lukyjilu">-->
                        <div id="jiluLucky" class="icon_box"><img src="../assets/duoImages/classify_icon_04.png" /></div>
                        <div class="icon_info">幸运记录</div>
                    <!--</a>-->
                    </router-link>
                </li>

                <li>
                    <router-link :to="{path:'/Allshare'}">
                    <!--<a href="/#/Allshare">-->
                        <div id="shaidan" class="icon_box"><img src="../assets/duoImages/classify_icon_05.png" /></div>
                        <div class="icon_info">晒单分享</div>
                    <!--</a>-->
                    </router-link>
                </li>
                <li>
                    <router-link :to="{path:'/Help'}">
                    <!--<a href="/#/Help">-->
                    <div id="jiluHelp" class="icon_box"><img src="../assets/duoImages/classify_icon_02.png" /></div>
                    <div class="icon_info">帮助</div>
                    <!--</a>-->
                    </router-link>
                </li>



            </ul>
        </div>
        <!-- <div class="name_slide_show"> -->
        <!--     <div class="laba"><img src="../assets/duoImages/laba.png" /></div> -->
        <!--     <div class="labacnt"> -->
        <!--         <div class="swiper&#45;container laba&#45;swiper&#45;container"> -->
        <!--             <div class="swiper&#45;wrapper"> -->
        <!--  -->
        <!--             </div> -->
        <!--         </div> -->
        <!--     </div> -->
        <!-- </div> -->
    </div>

    <!--<div class="resultData">{{all_myrest_IndexProducts}}</div>-->
    <div class="product_List">
        <!--列表排序导航按钮-->
        <div class="list_sort">
          <div class="sortbox"><div id="tagHot" v-on:click="paixuNav($event)"  class="opt tagHot active">人气</div></div>
          <div class="sortbox"><div id="tagLatest" v-on:click="paixuNav($event)" class="opt tagLatest">最新</div></div>
          <div class="sortbox"><div id="tagProgress" v-on:click="paixuNav($event)" class="opt tagProgress">进度</div></div>
          <div class="sortbox"><div id="tagTotalnum" v-on:click="paixuNav($event)" class="opt tagTotalnum">总需人次</div></div>
        </div>
        <ul class="product_ul clear">
            <li class="list_li" v-bind:style="{width: prolistwidth+'px'}" v-for="ProductsItem in all_myrest_IndexProducts">

                <!-- <a v&#45;bind:href="'/#/Details?spellbuyProductId='+ProductsItem.spellbuyProductId+'&#38;productId='+ProductsItem.productId"> -->
                <router-link :to="{path:'/Details'+ '/' + ProductsItem.spellbuyProductId + '/' + ProductsItem.productId}">
                    <div class="product_pic" style="height: 157px;">
                        <div class="pic_pos"><img v-bind:src="ProductsItem.headImage"></div>
                    </div>
                    <div class="pro_name">{{ProductsItem.productName}}</div>
                </router-link>
                <!--</router-link>-->
                <div class="progress">
                    <div class="progress_cnt">
                        <div class="progress_cnt_text">{{yu_text}}：<span class="progress_num">{{jindu_yuNum?ProductsItem.yuNum:ProductsItem.jindu}}</span></div>
                        <div class="progress_bg">
                            <div class="progress_val" v-bind:style="{width:ProductsItem.jindu}"></div>
                        </div>
                    </div>
                    <div class="progress_buy">
                        <div class="buy_btn" v-on:click="gobuy($event,ProductsItem.singlePoint,ProductsItem.productPrice-ProductsItem.currentBuyCount,ProductsItem.spellbuyProductId)">立即购买</div>
                    </div>
                </div>
            </li>
        </ul>
    </div>

    <div class="blackcover" id="blackcover" ></div>
    <div class="orderform" id="orderform">
        <div class="tishi">
          <div class="tishi_cnt">夺宝有风险，参与需谨慎</div>
          <div class="shut" v-on:click="orderformHide"><img src="../assets/duoImages/shut.png" /></div>
        </div>
        <div class="iptwrap">
            <div class="iptarea">
                <div class="renci">参与人次</div>
                <div class="numbox">
                    <div class="jian" v-on:click="jian()"><img src="../assets/duoImages/jian.png" /></div>
                    <div class="iptvalbox"><input type="number" value="1" v-model="buypayload.postData.num"></div>
                    <div class="jia" v-on:click="jia()"><img src="../assets/duoImages/jia.png" /></div>
                </div>
                <div class="optlistbox clear">
                    <div class="optlist"><div class="optlistbtn" v-on:click="optclick($event)">5</div></div>
                    <div class="optlist"><div class="optlistbtn" v-on:click="optclick($event)">20</div></div>
                    <div class="optlist"><div class="optlistbtn" v-on:click="optclick($event)">50</div></div>
                    <div class="optlist"><div class="optlistbtn" v-on:click="optclick($event)">100</div></div>
                </div>
                <div class="yu_tips"></div>

            </div>
            <div class="totalprc">共<span class="totalprcval"><span class="totalvalnum">{{buypayload.postData.num*singlePoint}}</span>积分</span></div>
        </div>
        <div class="ipt_buy">
            <div class="ipt_buy_btn" v-on:click="buy()">立即购买</div>
        </div>
        <div class="buyMsgPosting"><img src="../assets/duoImages/onloadicon.gif" /></div>
    </div>

</div>
</template>
<script>
  import stores from './mystore.js'
  import Vue from 'vue';
  import { XButton, XInput,Group, Tab, TabItem } from 'vux'
  import { mapGetters,mapActions } from 'vuex'
  import sha1 from 'js-sha1'

  export default {
      data(){
          return {
              userjfAmount:'',
              BuyProductData:'',
              prolistwidth:180,
              ini:true,
              made:2,
              kk:false,
              duoBaoId:'',
              jindu_yuNum:true,
              yu_text:"剩余次数",
              yu_num:'',
              singlePoint:0,
              successMsg:"",
              items:[1,2,3,4,5],
              testMsg:"hahahahah",
              mypayload:{
                  url:'duodata',
                  actionName:"IndexProducts",
                  postData: {
                      //mobile:"18616717008",
                      //password:"112233",
                      //treeView:"true"
                  }
              },
              buypayload:{
                url:'duodata',
                actionName:"BuyProduct",
                postData: {
                    "spellbuyProductId":"10445",
                    "num":"1",
                    //"treeView":""
                }
              },

              userQueryUserInfoPayload:{
                  url:'baseapi',
                  actionName:"Login",
                  postData: {
                      mobile:"18616717008",
                      password:"112233",
                      //treeView:"true"
                }
              },
              loginpayload:{
                  url:'baseapi',
                  actionName:"QueryUserInfo",
                  postData: {
                      //mobile:"18616717008",
                      //password:"112233",
                      //treeView:"true"
                  }
              },

              labapayload:{
                  url:'duodata',
                  actionName:"ShowWinRecord",
                  postData: {
                      //mobile:"18616717008",
                      //password:"112233",
                      //treeView:"true"
                  }
              },

          }
      },

      computed:{

            all_islogoined () {
                        return this.$store.getters.all_islogoined
                      },
          all_myrest(){
              return this.$store.getters.all_restful
          },
          all_myrest_IndexProducts(){
              let that=this;
              var dataval=this.$store.getters.all_restful_IndexProducts;
              var testData={"myname":"dongguang"}
              if(dataval){
                  if(this.ini==true){
                    setTimeout(function(){
                      that.inifuc()
                    },200)
                  }
                 //this.paixu()
                  return dataval.body.indexproducts
              }else{
                  return null
              }
              //return dataval;
          },
          all_myrest_BuyProduct(){
              var dataval=this.$store.getters.all_restful_BuyProduct;
              if(dataval){
                  console.info(this.kk)
                  if(this.kk){
                      if(dataval.body.message=="SUCCESS"){
                         // alert("购买成功")
                          this.$router.push('/DuoSuccess/'+this.duoBaoId+'/'+dataval.body.userIdBuyCount+'/successMark')
                          this.kk=false;
                          this.BuyProductData=dataval.body;
                          $(".orderform").removeClass("orderformEleShow")
                          $(".blackcover").removeClass("blackcoverEleShow")
                      }
                  }
                  return dataval
              }else{
                  return null
              }
              //return dataval;  blackcover blackcoverEleShow
          },
          all_myrest_Login(){
              var dataval=this.$store.getters.all_restful_Login;
              var testData={"myname":"dongguang"}
              if(dataval){
                return dataval
              }else{
                return null
              }
              //return dataval;
          },
          all_myrest_ShowWinRecord(){
              var dataval=this.$store.getters.all_restful_ShowWinRecord;
              if(dataval){
                  return dataval
              }else{
                  return null
              }
          },
          all_myrest_QueryUserInfo(){
              var dataval=this.$store.getters.all_restful_QueryUserInfo;
              if(dataval){
                  this.userjfAmount=dataval.body.jfAmount;
                  return dataval.body
              }else{
                  return null
              }
              //return dataval;
          },
          all_nots(){
              return this.$store.getters.all_nots
          },
          all_login(){
              return this.$store.getters.all_login
          },
          ...mapGetters([ 'evenOrOdd'
          ])
      },
      created (){
        console.info(this.BuyProductData);
  // <div>{{BuyProductData==null?'':''}}</div>
          var win_W=$(window).width();
          var win_H=$(window).height();
          this.prolistwidth=win_W/2-1;
          this.cntReady();
          console.log(this.buypayload.postData.treeView)
      },

      methods:{
          paixuNav:function(e){
              //alert(this.buypayload.postData.treeView)
              var obj=e.currentTarget;
              if(!$(obj).hasClass("active")){
                  $(obj).addClass("active").parent().siblings().find(".opt").removeClass("active");
                  var paixuNavId=$(obj).attr("id");
                  this.paixu(paixuNavId)
              }
          },
          inifuc:function(){
            if(this.ini==true){
              this.paixu("tagHot");
              this.ini=false;
            }
          },
          paixu:function(typeTag){
              console.log("TTTTTTT:"+this.buypayload.postData.treeView)
              //alert(this.all_myrest_IndexProducts.length)
              var singleJindu='';
              for(var j=0;j<this.all_myrest_IndexProducts.length;j++){
                  singleJindu=Math.floor((this.all_myrest_IndexProducts[j].currentBuyCount/this.all_myrest_IndexProducts[j].productPrice)*100);
                  this.all_myrest_IndexProducts[j].productjindu=singleJindu;
                  this.all_myrest_IndexProducts[j].yuNum=this.all_myrest_IndexProducts[j].productPrice-this.all_myrest_IndexProducts[j].currentBuyCount;
                  this.all_myrest_IndexProducts[j].jindu=this.GetPercent(this.all_myrest_IndexProducts[j].currentBuyCount,this.all_myrest_IndexProducts[j].productPrice);
              }

              if(typeTag=="tagHot"){
                this.jindu_yuNum=true;
                this.yu_text="剩余次数";
                this.all_myrest_IndexProducts=this.all_myrest_IndexProducts.sort(this.compare('spellbuyProductId'));
              }
              if(typeTag=="tagLatest"){
                this.jindu_yuNum=true;
                this.yu_text="剩余次数";
                this.all_myrest_IndexProducts=this.all_myrest_IndexProducts.sort(this.compare('spellbuyStartDate'));
              }
              if(typeTag=="tagProgress"){
                this.jindu_yuNum=false;
                this.yu_text="揭晓进度";
                this.all_myrest_IndexProducts=this.all_myrest_IndexProducts.sort(this.compare('productjindu'));
              }
              if(typeTag=="tagTotalnum"){
                this.jindu_yuNum=true;
                this.yu_text="剩余次数";
                this.all_myrest_IndexProducts=this.all_myrest_IndexProducts.sort(this.compare('productPrice'));
              }
          },

          GetPercent:function(num,total){
              var jindu=(Math.floor(num/total * 100) + "%");
              return jindu;
          },

          compare:function(property){
              return function(a,b){
                var value1 = a[property];
                var value2 = b[property];
                return value2 - value1;
              }
          },

          orderformHide:function(){
            Event.fire('showingtabb')
              var orderformEle=document.getElementById("orderform");
              var blackcoverEle=document.getElementById("blackcover");
              orderformEle.className="orderform orderformEleHide";
              blackcoverEle.className="blackcover";
          },
          gobuy:function(obj,single_point,jindu_yuNum,duoId){
            var dddd = this.all_islogoined;
            if(this.all_islogoined ==false ){
             // this.$store.commit('restful_api',this.userQueryUserInfoPayload)
              this.$router.push('/login')
            }else {
              this.$store.commit('restful_api',this.loginpayload)
              Event.fire('killtabb')
              this.singlePoint=single_point;
              this.yu_num=jindu_yuNum;
              // alert(this.singlePoint)
              this.duoBaoId=duoId;
              this.buypayload.postData.spellbuyProductId=duoId;
              //$(".totalvalnum").text($(".iptvalbox input").val()*single_point);
              var orderformEle=document.getElementById("orderform");
              var blackcoverEle=document.getElementById("blackcover");
              orderformEle.className="orderform orderformEleShow";
              blackcoverEle.className="blackcover blackcoverEleShow";
            }
          },

          jia:function(e){
              var numchange=parseInt($(".iptvalbox input").val());
              //alert(numchange)
              if(numchange<this.yu_num){
                this.buypayload.postData.num=numchange+1;
                //$(".iptvalbox input").val(numchange+1);
                //$(".totalvalnum").text((numchange+1)*this.singlePoint);
              }else{
                //alertWindow('剩余次数不足')
                alert("剩余次数不足")
              }
          },
          jian:function(e){
              var numchange=parseInt($(".iptvalbox input").val());
              //alert(numchange)
              if(numchange>1 && numchange<this.yu_num) {
                  this.buypayload.postData.num=numchange-1;
                  //$(".iptvalbox input").val(numchange - 1);
                  //$(".totalvalnum").text((numchange - 1) * this.singlePoint);
              }else if(numchange<=1){
                  alert("单笔手数最少为1")
              }else{
                  //alertWindow('剩余次数不足')
                  alert("剩余次数不足")
              }
          },
          optclick:function(e){
              var obj=e.currentTarget;
              var optnum=parseInt($(obj).text());
              if(optnum<=this.yu_num){
                this.buypayload.postData.num=optnum;
              }else{
                alert("本期剩余次数只有"+this.yu_num+"次")
                this.buypayload.postData.num=this.yu_num;
              }
          },
          buy:function (){
            if(this.all_islogoined ==false ){
              this.$router.push('/login')
            }else {
                if(this.userjfAmount>=this.buypayload.postData.num*this.singlePoint){
                    this.kk=true;
                    this.$store.commit('restful_api',this.buypayload)
                }else{
                    this.$vux.alert.show({
                      title:"积分不足",
                      content:'本次夺宝积分不足'
                    })

                }
                //this.$store.commit('restful_api',this.buypayload)
                Event.fire('killtabb')
                // Event.fire('showingtabb')
             }
          },
          tttst:function(){
            this.$router.go({path: '/Details', data: {message: 'Token expired'}});
          },

          labaTest:function(){
              this.$store.commit('restful_api',this.labapayload)

          },
          dosth (){
              this.$store.commit('restful_api',this.mypayload)
          },

          loginTest:function (){
              this.$store.commit('restful_api',this.loginpayload)
          },

          cntReady(){
              //console.info(3434343);
              this.$store.commit('restful_api',this.mypayload);
           },
          ...mapActions([
              'increment',
              'decrement',
              'incrementIfOdd'
          ]),
      },
      components: { XButton, Group, XInput, Tab, TabItem }

  }

</script>

<style scoped>
.main {height:auto}
  *{ margin:0; padding:0;}
  html,body{ width:100%; background-color:#e8e8e8;}
  a{ text-decoration:none;}
  ul{ margin:0; padding:0; list-style:none;}
  .clear:after{ content: ""; display: block;height: 0;visibility: hidden;clear: both;}
  div img{ width:100%;}
  /*=== banner轮播 ===*/
  .swiper-container{ width:100%;}
  .swiper-slide img{ width:100%; height:100%;}

  /*=== 顶部 分类导航 ===*/
  .classify_nav_box{ width:100%;}
  .classify_nav{ padding-bottom:15px; background-color:#fff; border-bottom:1px solid #eee;}
  .classify_nav ul{ margin:0; padding-top:15px; list-style:none; display:box; display:-webkit-box;}
  .classify_nav ul li{ -webkit-box-flex:1; box-flex:1; text-align:center;}
  .icon_box{ width:30%; margin:0 auto; }
  .icon_box img{ width:100%;}
  .icon_info{ font-size:12px; margin-top:5px; color:#666666;}
  .name_slide_show{ box-sizing:border-box; padding:12px 15px 8px 15px; display:box; display:-webkit-box; background-color:#fff;}
  .laba{ width:18px;}
  .laba img{ width:100%;}
  .labacnt{ -webkit-box-flex:1; box-flex:1; padding-left:6px; font-size:12px; color:#999999;}
  .show_name{ color:#3273c3;}
  .price_name{ color:#3273c3;}

  .labacnt .swiper-container{ width:100%; height:20px;}

  /*=== 排序列表 ===*/
  .list_sort{ display:box; display:-webkit-box; width:100%; background-color:#fff; border-bottom:1px solid #eee;}
  .sortbox{ -webkit-box-flex:1; box-flex:1;}
  .opt{ width:60px; margin:0 auto; text-align:center; font-size:12px; color:#666; padding:10px 0 10px 0;}
  .opt.active{ border-bottom:2px solid #db3652; color:#db3652;}

  /*=== 商品列表 ===*/
  .product_List{ margin-top:10px; padding-bottom:56px;}
  .product_List ul{}
  .product_List ul li{ _width:50%; float:left; background-color:#fff; padding-top:12px; border-right:1px solid #e8e8e8; border-bottom:1px solid #e8e8e8;}
  .product_pic{ width:84%; margin:0 auto; position:relative;}
  ._product_pic img{ width:100%;}
  .pic_pos{ position:absolute; left:0; top:0;}
  .pic_pos img{ width:100%; _display:block;}
  .pro_name{ box-sizing:border-box; margin-top:10px; -webkit-box-sizing:border-box; width:100%; height:32px; padding:0 14px; font-size:12px; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; display:-webkit-box; color:#262626;}
  .progress{ display:box; display:-webkit-box; box-sizing:border-box; -webkit-box-sizing:border-box; padding:10px 14px;}
  .progress_cnt{ -webkit-box-flex:1; box-flex:1; font-size:12px; color:#535353;}
  .progress_num{ color:#007aff;}
  .progress_buy{ width:56px; font-size:12px; color:red; line-height:24px; text-align:center;}
  .buy_btn{ width:100%; border-radius:3px; border:1px solid red;}
  .progress_bg{ width:90%; height:4px; background-color:#eee; border-radius:2px; margin-top:6px;}
  .progress_val{ width:71%; height:4px; background-color:#ffc73c; border-radius:2px;}

  /*======== 积分悬浮窗 =========*/
  .jfxf{ color:#fff; font-size:12px; position:absolute; right:20px; top:-55px; padding:5px 10px; text-align:center; background-color:#202020; border-radius:40px; }
  .jfxf_icon{ width:14px; margin:0 auto; margin-top:2px;}

  /*======== 点击购买之后 数据请求过程中‘菊花转’ =========*/
  .buyMsgPosting{ width:40px; padding:10px; border-radius:5px; background:rgba(0,0,0,0.3); border:1px solid #aaa; position:absolute; left:50%; top:50%; margin-left:-30px; margin-top:-36px; display:none;}

  /***=====   以下为原夺宝公共部分   =====****/
  /***数据为空***/
  .noContPic{ width:40%; margin:0 auto;}
  .noContTxt{ text-align:center; color:#bbb; margin-top:15px;}

  /**页面未找到**/
  .noPageWrap{ width:80%; margin:0 auto; padding-top:15%; }
  .noPageGoBack{ text-align:center; padding:15px; border-bottom:1px solid #eee; border-top:1px solid #eee; background-color:#fcfcfc;}

  /**购买 输入框**/
  .blackcover{ width:100%; height: 100%; background-color:#000; opacity:0.5; position:fixed; left:0; bottom:0; display:none; z-index:999;}
  .blackcover.blackcoverEleShow{ width:100%; height: 100%; background-color:#000; opacity:0.5; position:fixed; left:0; bottom:0; display:block; z-index:999;}
  .orderform{ width:100%; position:fixed; left:0; bottom:-300px; background-color:#fff; z-index:1000; _opacity:0.3;}
  .tishi{ display:box; display:-webkit-box; border-bottom:1px solid #e7e7e7; padding:15px; color:#999999; font-size:14px;}
  .tishi_cnt{  box-flex:1; -webkit-box-flex:1;}
  .shut{ width:15px; }
  .iptwrap{ padding-left:15px; border-bottom:1px solid #e7e7e7;}
  .iptarea{ border-bottom:1px solid #e7e7e7; padding-bottom:15px; position:relative;}
  .renci{ text-align:center; font-size:14px; padding:10px 0;}
  .numbox{ display:box; display:-webkit-box; width:70%; border:1px solid #aeaeae; border-radius:3px; margin:0px auto 15px auto; padding-top:1px;}
  .yu_tips{ position:absolute; right:15%; top:13px; color:#db3652; font-size:12px; opacity:0.8; display:none;}
  .jia,.jian{ width:15px; height:15px; padding:10px;}
  .jia{ border-left:1px solid #eee;}
  .jian{ border-right:1px solid #eee;}
  .iptvalbox{ box-flex:1; -webkit-box-flex:1;}
  .iptvalbox input{ width:100%; height:34px; font-size:14px; color:#db3652; border:none; text-align:center; outline:none; }
  .optlistbox{ width:70%; margin:0 auto;;}
  .optlist{ float:left; width:22%; margin-right:4%;}
  .optlistbtn{ border:1px solid #aeaeae; border-radius:3px; text-align:center; padding:3px 0;}
  .optlist:nth-last-child(1){ margin-right:0;}
  .ipt_buy{ padding:10px; color:#fff; font-size:14px;}
  .ipt_buy_btn{ width:100%; background-color:#db3652; border-radius:3px; text-align:center; padding:10px 0;}
  .unableClick{ width:100%; background-color:#db3652; border-radius:3px; text-align:center; padding:10px 0;}
  .totalprc{ text-align:center; padding:10px 0; color:#999;}
  .totalprcval{ color:#db3652;}

  /**==  动画  ==*/
  /*-----购买表单显示----------------------------*/
  .orderformEleShow{animation:orderformShow 0.5s forwards; -webkit-animation:orderformShow 0.5s forwards;}
  @keyframes orderformShow
  {
    from {bottom:-300px;}
    to {bottom:0px;}
  }
  @-webkit-keyframes orderformShow /*Safari and Chrome*/
  {
    from {bottom:-300px;}
    to {bottom:0px;}
  }
  /*-----购买表单隐藏----------------------------*/
  .orderformEleHide{animation:orderformHide 0.5s forwards; -webkit-animation:orderformHide 0.5s forwards;}
  @keyframes orderformHide
  {
    from {bottom:0px;}
    to {bottom:-300px;}
  }
  @-webkit-keyframes orderformHide /*Safari and Chrome*/
  {
    from {bottom:0px;}
    to {bottom:-300px;}
  }

  /*-----模态层显示----------------------------*/
  .blackcoverEleShow{animation:blackcoverShow 0.5s forwards; -webkit-animation:blackcoverShow 0.5s forwards;}
  @keyframes blackcoverShow
  {
    from {opacity:0;}
    to {opacity:0.5;}
  }
  @-webkit-keyframes blackcoverShow /*Safari and Chrome*/
  {
    from {opacity:0;}
    to {opacity:0.5;}
  }
  /*-----模态层隐藏----------------------------*/
  .blackcoverEleHide{animation:blackcoverHide 0.5s forwards; -webkit-animation:blackcoverHide 0.5s forwards;}
  @keyframes blackcoverHide
  {
    from {opacity:0;}
    to {opacity:0.5;}
  }
  @-webkit-keyframes blackcoverHide /*Safari and Chrome*/
  {
    from {opacity:0;}
    to {opacity:0.5;}
  }
</style>
